<template>
    <div class="main">
        <el-card class="card">
            <div class="title">
                <h2 style="text-align: center">创建报表</h2>
            </div>
        </el-card>
        <br />
        <el-card v-loading="loading">
            <div style="layout-grid: 15.6pt">
                <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" width="100%">
                    <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes">
                        <td width="25%" colspan="6" valign="top" class="td01">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span class="MsoNormalFont">责任部门：（支持多个）</span>
                                <div>
                                    {{reportFormBasicInfo.managerDeptId}}
                                </div>
                            </p>
                        </td>
                        <td width="50%" colspan="12" valign="top" class="td02">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span class="MsoNormalFont">项目/任务名称：</span>
                                <div>
                                    {{reportFormBasicInfo.projectName}}
                                </div>
                            </p>
                        </td>
                        <td width="24%" colspan="5" valign="top" class="td03">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span class="MsoNormalFont reportDate">报告日期：</span>
                                <!-- <el-date-picker v-model="reportFormBasicInfo.projectGenerateTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @blur="changeDate">  </el-date-picker> -->
                                <div>
                                    {{reportFormBasicInfo.projectGenerateTime}}
                                </div>
                            </p>
                        </td>
                    </tr>
                    <!--第二行-->
                    <tr style="mso-yfti-irow: 1">
                        <td width="100%" colspan="23" valign="top" class="td04">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span class="MsoNormalFont">主要目标：</span>
                                {{reportFormBasicInfo.mainTarget}}
                            </p>
                        </td>
                    </tr>

                    <tr style="mso-yfti-irow: 2">
                        <td width="14%" colspan="4" valign="top" class="td05">
                            <p align="center" style="text-align: center; line-height: 150%">
                                <span class="MsoNormalFont">目标类</span>
                            </p>
                        </td>
                        <td width="17%" colspan="3" valign="top" class="td06">
                            <p align="center" style="text-align: center; line-height: 150%">
                                <span class="MsoNormalFont">主要任务/工作</span>
                            </p>
                        </td>
                        <td width="48%" colspan="12" valign="top" class="td07">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span class="MsoNormalFont">项目结束时间要求：{{reportFormBasicInfo.projectEndTime}}</span>
                            </p>
                        </td>
                        <td width="20%" colspan="4" valign="top" class="td08">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span class="MsoNormalFont">负责人/优先级（支持多人）</span>
                            </p>
                        </td>
                    </tr>

                    <!--具体内容-->
                    <tr style="mso-yfti-irow: 5"  v-for="(content,i) in reportFormWorkList" :key="i">
                        <!--目标类内容-->
                        <td class="td5-1" v-for="(typeItem,index1) in content.typeList" :key="index1" width="3%" valign="top">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">&nbsp;{{typeItem}}</span>
                            </p>
                        </td>
                        <!--主要任务序号工作-->
                        <td class="td5-2" width="5%" valign="top">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">{{content.number}}</span>
                            </p>
                        </td>
                        <!--主要任务内容工作-->
                        <td width="11%" colspan="2" valign="top" class="td5-3">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">&nbsp;{{content.name}}</span>
                            </p>
                        </td>

                        <!--每月项目情况-->
                        <td v-for="(item,index2) in reportFormWorkOtherInfoList[i]" :key="index2" width="3%" valign="top" class="td5-4">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%" >&nbsp;
                                    <span v-if="item.workType==0"></span>
                                    <el-button class="a" type="text" @click="openDialog(index2,item)" v-if="item.workType==1" >未处理</el-button>
                                    <el-button class="b" type="text" @click="openDialog(index2,item)" v-if="item.workType==2" >正常</el-button>
                                    <el-button class="c" type="text" @click="openDialog(index2,item)" v-if="item.workType==3">担忧</el-button>
                                    <el-button class="d" type="text" @click="openDialog(index2,item)" v-if="item.workType==4" >警告</el-button>
                                    <el-button class="e" type="text" @click="openDialog(index2,item)" v-if="item.workType==5">完成</el-button>

                                </span>
                            </p>
                        </td>

                        <!--负责人优先级情况情况-->
                        <td v-for="(managerItem,index3) in content.manager"  :key="index3"  width="5%" valign="top" class="td5-5">
                            <p style="line-height: 150%">
                                <span style="font-size: 5.5pt; line-height: 150%">&nbsp;{{managerItem}}</span>
                            </p>
                        </td>
                    </tr>

                    <!--月份行-->
                    <tr style="mso-yfti-irow: 6; height: 40.05pt">
                        <td class="td6-1" width="3%" rowspan="3">
                            <p class="MsoNormal" align="center" style="text-align: center; line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">C</span>
                            </p>
                        </td>
                        <td class="td6-2" width="3%" rowspan="3">
                            <p class="MsoNormal" align="center" style="text-align: center; line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">B</span>
                            </p>
                        </td>
                        <td class="td6-3" width="3%" rowspan="3">
                            <p align="center" style="text-align: center; line-height: 150%">
                                <span style="font-size: 5.5pt; line-height: 150%">A</span>
                            </p>
                        </td>
                        <td class="td6-4" width="3%" rowspan="3">
                            <p class="MsoNormal" align="center" style="text-align: center; line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">A+</span>
                            </p>
                        </td>
                        <td class="td6-5" width="17%" colspan="3" rowspan="2" valign="top">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%"
                                    ><span style="mso-spacerun: yes">        </span></span
                                ><span class="MsoNormalFont">工作</span
                                ><span lang="EN-US" style="font-size: 5.5pt; line-height: 150%"></span>
                            </p>
                            <p class="MsoNormal" align="center" style="text-align: right; line-height: 150%; tab-stops: right 118.1pt;">
                                <span class="MsoNormalFont">进度</span>
                            </p>
                            <p style="line-height: 150%; tab-stops: right 118.1pt">
                                <span class="MsoNormalFont">目标</span>
                            </p>
                            <p class="MsoNormal" align="right" style="text-align: right; line-height: 150%">
                                <span class="MsoNormalFont">成本</span>
                            </p>
                            <p class="MsoNormal" style="line-height: 150%">
                                <span class="MsoNormalFont">备注</span>
                            </p>
                        </td>
                        <!--1-12月渲染-->
                        <td class="td6-6" v-for="(n,index) in 12" :key="index" width="3%" valign="top">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span class="MsoNormalFont">{{ n }}月</span>
                            </p>
                        </td>
                        <!--负责人姓名-->
                        <td class="td6-7" v-for="(managerItem,index) in managerListLevel" :key="index" width="5%" valign="top">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span class="MsoNormalFont">{{managerItem}}</span
                                ><span lang="EN-US" style="font-size: 5.5pt; line-height: 150%"></span>
                            </p>
                            <p class="MsoNormal" style="line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">&nbsp;</span>
                            </p>
                        </td>
                    </tr>

                    <!--成本行-->
                    <tr style="mso-yfti-irow: 7">
                        <td class="td7-1" width="44%" colspan="11">
                            <table border="1" cellspacing="0" cellpadding="0" class="td10">
                                <!--进度条-->

                                <tr>
                                    <td width="417" valign="top" class="td09">
                                        <el-progress :text-inside="true" :stroke-width="26" :percentage="reportFormBasicOtherInfo.moneyUsed"></el-progress>
                                    </td>
                                </tr>
                            </table>
                            <p class="MsoNormal" align="center" style="text-align: center; line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%"></span>
                            </p>
                        </td>
                        <td class="td7-2" width="24%" colspan="5">
                            <p align="right" style="text-align: right; line-height: 150%">
                                <span style="font-size: 5.5pt; line-height: 150%">{{moneyLeft}}</span
                                ><span class="MsoNormalFont">元，已使用<el-input v-model="reportFormBasicOtherInfo.moneyUsed" style="width: 60px;padding: 0 10px"></el-input>%</span>
                            </p>
                        </td>
                    </tr>

                    <!--备注行-->
                    <tr style="mso-yfti-irow: 8; mso-yfti-lastrow: yes; height: 13.3pt">
                        <td class="td8" width="85%" colspan="19" valign="top">
                            <p class="MsoNormal" style="line-height: 150%">
                                <span lang="EN-US" style="font-size: 5.5pt; line-height: 150%">&nbsp;
                                    <el-input v-model="reportFormBasicOtherInfo.remark"></el-input>
                                </span>
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
            <br />
            <el-button type="success" @click="saveReportForm"> 保存 </el-button>
            <el-button type="info" @click="cancelCreate"> 返回 </el-button>
        </el-card>
                    <el-dialog
            title="任务进度"
            :visible.sync="dialogVisible"
            width="30%"
            :append-to-body="true">
                <div>状态:</div>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <div >进度:</div>
            <el-input v-model="processDialog"></el-input>
            <div >说明:</div>
    <el-input type="textarea" v-model="infoDialog" ></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveDialog">保 存</el-button>
            </span>
            </el-dialog>

    </div>
</template>

<script>
import moment from 'moment';
import reportFormsApi from '../../api/reportForms';
export default {
    props: {
        reportForm: Object
    },
    data() {
        return {
            reportFormBasicInfo: {},
            reportFormBasicOtherInfo: {},
            reportFormWorkList: {},
            // 月份对应的内容
            reportFormWorkOtherInfoList: [],
            // 负责人优先级
            managerListLevel: ['A', 'B', 'C', 'D'],
            percentage: '0',
            dialogVisible: false,
            options: [
                {
                    value: 1,
                    label: '未处理'
                },
                {
                    value: 2,
                    label: '正常'
                },
                {
                    value: 3,
                    label: '担忧'
                },
                {
                    value: 4,
                    label: '警告'
                },
                {
                    value: 5,
                    label: '完成'
                }
            ],
            value: '',
            processDialog: '',
            infoDialog: '',
            tempIndex: '',
            tempWorkId: '',
            //还剩多少钱
            moneyLeft: 0,
            tempReportForm: {},
            loading: false
        };
    },
    methods: {
        changeDate(value) {
            console.log('111');
            console.log(value);
            this.reportFormBasicInfo.projectGenerateTime = value;
        },
        cancelCreate() {
            this.$emit('cancelCreateReport');
        },
        async saveReportForm() {
            if (
                this.reportFormBasicOtherInfo.moneyUsed == '' ||
                this.reportFormBasicOtherInfo.moneyUsed == null ||
                this.reportFormBasicOtherInfo.moneyUsed == undefined
            ) {
                // this.$alert('成本使用情况未填写！', '警告', {
                //     confirmButtonText: '确定'
                // });
                // return;
            this.reportFormBasicOtherInfo.moneyUsed = 0;
            }
            if (
                this.reportFormBasicOtherInfo.moneyUsed > 100 ||
                this.reportFormBasicOtherInfo.moneyUsed < 0 ||
                isNaN(this.reportFormBasicOtherInfo.moneyUsed)
            ) {
                this.$alert('成本使用情况填写非法！请输入0-100', '警告', {
                    confirmButtonText: '确定'
                });
                return;
            }
            let flag = 0;
            for (let i = 0; i < this.$store.state.repeatCalender.calender.length; ++i) {
                if (this.$store.state.repeatCalender.calender[i] == this.reportFormBasicInfo.projectGenerateTime) {
                    flag = 1;
                    break;
                }
            }
            if (flag == 1) {
                this.$alert('当天仅能创建1份不同进度报表', '警告', {
                    confirmButtonText: '确定'
                });
                return;
            }
            this.loading = true
            for (let i = 0; i < this.reportForm.reportWorkList.length; ++i) {
                this.reportForm.reportWorkList[i].manager = this.reportForm.reportWorkList[i].manager.join(',');
            }
            let schoolReportFormVo = {
                // 有
                reportFormBasicInfo: this.reportForm.reportBasicInfo,
                reportFormBasicOtherInfo: this.reportFormBasicOtherInfo,
                // 有
                reportFormMemberList: this.reportForm.reportMemberList,
                // 有
                reportFormWorkList: this.reportForm.reportWorkList,
                // 有
                reportFormMoneyList: this.reportForm.reportMoneyList,
                reportFormWorkOtherInfoList: []
            };
            for (let i = 0; i < this.reportFormWorkOtherInfoList.length; ++i) {
                for (let j = 0; j < this.reportFormWorkOtherInfoList[i].length; ++j) {
                    schoolReportFormVo.reportFormWorkOtherInfoList.push(this.reportFormWorkOtherInfoList[i][j]);
                }
            }

            for (let j = 0; j < schoolReportFormVo.reportFormWorkOtherInfoList.length; ++j) {
                schoolReportFormVo.reportFormWorkOtherInfoList[j].workType = parseInt(
                    schoolReportFormVo.reportFormWorkOtherInfoList[j].workType
                );
            }
            // console.log("————————————————————————————————————");
            // console.log(schoolReportFormVo);
            // console.log("————————————————————————————————————");

            await reportFormsApi.createReportForm(0, this.reportForm.reportBasicInfo.id, schoolReportFormVo).then((res) => {

                this.$message.success('创建报表成功！');
            });
            this.loading = false
            this.$emit('cancelCreateReport');
        },
        openDialog(index, item) {
            this.tempIndex = index;
            this.tempWorkId = item.workId;
            this.value = '';
            this.processDialog = '';
            this.infoDialog = '';
            // 任务性质
            this.value = item.workType;
            this.processDialog = item.workProcess;
            this.infoDialog = item.workInfo;
            this.dialogVisible = true;
        },
        saveDialog() {
            for (let i = 0; i < this.reportForm.reportWorkList.length; ++i) {
                // 如果id相同
                if (this.tempWorkId == this.reportForm.reportWorkList[i].id) {
                    // 如果月份相同
                    this.reportFormWorkOtherInfoList[i][this.tempIndex].workType = this.value;
                    this.reportFormWorkOtherInfoList[i][this.tempIndex].workProcess = this.processDialog;
                    this.reportFormWorkOtherInfoList[i][this.tempIndex].workInfo = this.infoDialog;
                }
            }
            this.tempIndex = '';
            this.tempWorkId = '';
            this.dialogVisible = false;

            (this.value = ''),
                (this.processDialog = ''),
                (this.infoDialog = ''),
                (this.tempIndex = ''),
                (this.tempWorkId = ''),
                (this.tempReportForm = {});
        },
        // 12个月数据
        initMonth() {
            for (let i = 0; i < this.reportForm.reportWorkList.length; ++i) {
                this.reportFormWorkOtherInfoList[i] = new Array(12);
                let startTime = '';
                let endTime = '';

                console.log(this.reportForm.reportWorkList[i].startTime);

                if (this.reportForm.reportWorkList[i].startTime) {
                    startTime = moment(this.reportForm.reportWorkList[i].startTime).format('MM');
                    startTime = Number(startTime);
                }
                if (this.reportForm.reportWorkList[i].endTime) {
                    endTime = moment(this.reportForm.reportWorkList[i].endTime).format('MM');
                    endTime = Number(endTime);
                }
                // console.log("起止时间");
                // console.log(startTime);
                // console.log(typeof startTime);
                // console.log(endTime);
                let index = 1;
                for (let j = 1; j <= 12; ++j) {
                    if (index <= endTime && index >= startTime) {
                        this.reportFormWorkOtherInfoList[i][j - 1] = {
                            workId: this.reportForm.reportWorkList[i].id,
                            month: j,
                            workType: 1,
                            workProcess: 0,
                            workInfo: ''
                        };
                    } else {
                        this.reportFormWorkOtherInfoList[i][j - 1] = {
                            workId: this.reportForm.reportWorkList[i].id,
                            month: j,
                            workType: 0,
                            workProcess: 0,
                            workInfo: ''
                        };
                    }
                    index++;
                }
            }
            // for (let i = 1; i <= 12; ++i) {
            //     let x = {
            //         // workId: this.reportForm.reportWorkList[i].id,
            //         month: i,
            //         workType: 1,
            //         workProcess: 0,
            //         workInfo: ''
            //     };
            //     this.reportFormWorkOtherInfoList.push(x);
            // }
        }
    },
    watch: {
        reportForm() {
            console.log(this.reportForm);
            this.tempReportForm = this.reportForm;
            this.reportFormBasicInfo = {
                managerDeptId: this.reportForm.reportBasicInfo.managerDeptId,
                projectName: this.reportForm.reportBasicInfo.projectName,
                mainTarget: this.reportForm.reportBasicInfo.mainTarget,
                projectEndTime: this.reportForm.reportBasicInfo.projectEndTime
            };
            // 时间初始化
            this.reportFormBasicInfo.projectEndTime = moment(this.reportFormBasicInfo.projectEndTime).format('YYYY-MM-DD');
            // 工作任务列表
            this.reportFormWorkList = this.reportForm.reportWorkList;

            for (let i = 0; i < this.reportFormWorkList.length; ++i) {
                this.reportFormWorkList[i].manager = this.reportFormWorkList[i].manager.split(',');
                // 负责人数组
                if (this.reportFormWorkList[i].manager.length < 4) {
                    let inputCount = 4 - this.reportFormWorkList[i].manager.length;
                    for (let j = 0; j < inputCount; ++j) {
                        this.reportFormWorkList[i].manager.push(' ');
                    }
                }
                if (this.reportFormWorkList[i].manager.length > 4) {
                    let inputCount = this.reportFormWorkList[i].manager.length - 4;
                    for (let j = 0; j < inputCount; ++j) {
                        this.reportFormWorkList[i].manager.pop();
                    }
                }
                // 处理目标类类型
                this.reportFormWorkList[i].typeList = [];

                for (let type = 0; type <= 3; ++type) {
                    this.reportFormWorkList[i].typeList[type] = ' ';
                    if (this.reportFormWorkList[i].type == 1) {
                        // A+
                        this.reportFormWorkList[i].typeList[3] = '〇';
                    }
                    if (this.reportFormWorkList[i].type == 2) {
                        // A+
                        this.reportFormWorkList[i].typeList[2] = '〇';
                    }
                    if (this.reportFormWorkList[i].type == 3) {
                        // A+
                        this.reportFormWorkList[i].typeList[1] = '〇';
                    }
                    if (this.reportFormWorkList[i].type == 4) {
                        // A+
                        this.reportFormWorkList[i].typeList[0] = '〇';
                    }
                }
            }
            this.moneyLeft = 0;
            // 计算总共多少钱
            for (let j = 0; j < this.reportForm.reportMoneyList.length; ++j) {
                this.moneyLeft += this.reportForm.reportMoneyList[j].financeMoney;
            }
            // console.log(this.typeList);
            this.initMonth();
            let date = new Date();
            date.toLocaleDateString();
            this.reportFormBasicInfo.projectGenerateTime = moment().format('yyyy-MM-DD');
            // console.log("_______");
            // console.log(this.$store.state.reportForms.baseInfo);
        }
        // '$store.state.reportForms.baseInfo': function(){
        //     console.log("_______");
        //     console.log(this.$store.state.reportForms.baseInfo);
        // }
    },
    created() {}
};
</script>

<style  scoped>
.a {
    color: #9a9da1;
}
.b {
    color: #64a6fc;
}
.c {
    color: #dc9a3c;
}
.d {
    color: red;
}
.e {
    color: #84c55f;
}
.reportDate {
    margin-bottom: 5px;
    display: block;
}
.main {
    background-color: #eeeeee;
    padding: 10px 10px;
    height: 100vh;
}
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
.MsoNormalTable {
    width: 100%;
    border-collapse: collapse;
    border: none;
}
.MsoNormalFont {
    font-size: 5.5pt;
    line-height: 150%;
    font-family: 宋体;
}
.td01 {
    width: 25.32%;
    border: solid windowtext 1pt;
    /* mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td02 {
    width: 50.38%;
    border: solid windowtext 1pt;
    border-left: none;
    /* mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td03 {
    width: 24.32%;
    border: solid windowtext 1pt;
    border-left: none;
    /* mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td04 {
    width: 100%;
    border: solid windowtext 1pt;
    border-top: none;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td05 {
    width: 14.12%;
    border: solid windowtext 1pt;
    border-top: none;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td06 {
    width: 17.1%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td07 {
    width: 48.32%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td08 {
    width: 20.46%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    /* mso-border-top-alt: solid windowtext 0.5pt;
    mso-border-left-alt: solid windowtext 0.5pt;
    mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td09 {
    width: 312.5pt;
    border: windowtext 1pt;
    /* mso-border-alt: solid windowtext 0.5pt; */
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td10 {
    border-collapse: collapse;
    border: none;
    /* mso-border-alt: solid windowtext 0.5pt;
    mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
    mso-border-insideh: 0.5pt solid windowtext;
    mso-border-insidev: 0.5pt solid windowtext; */
}
.td5-1 {
    width: 3.22%;
    border: solid windowtext 1pt;
    border-top: none;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td5-2 {
    width: 5.14%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td5-3 {
    width: 11.96%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td5-4 {
    width: 3.82%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td5-5 {
    width: 5.12%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td6-1 {
    width: 3.22%;
    border: solid windowtext 1pt;
    border-top: none;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-2 {
    width: 3.24%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-3 {
    width: 3.82%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-4 {
    width: 3.82%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-5 {
    width: 17.1%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-6 {
    width: 3.82%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td6-7 {
    width: 5.12%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 40.05pt;
}
.td7-1 {
    width: 44.48%;
    border: none;
    border-bottom: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td7-2 {
    width: 24.32%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
}
.td8 {
    width: 85.88%;
    border-top: none;
    border-left: none;
    border-bottom: solid windowtext 1pt;
    border-right: solid windowtext 1pt;
    padding: 0cm 5.4pt 0cm 5.4pt;
    height: 13.3pt;
}

</style>